<template>
  <div style="height: 400px">
    <BaseChart :options="barOptions" :height="400"
               :on-events="{ click: onClick }"
               @ready="onReady"/>
  </div>
</template>

<script>
import BaseChart from '@/components/BaseChart.vue';

export default {
  components: { BaseChart },
  data() {
    return {
      barOptions: {
        tooltip: {},
        xAxis: { type: 'category', data: ['A','B','C','D'] },
        yAxis: { type: 'value' },
        series: [{ type: 'bar', data: [12, 20, 15, 8] }]
      }
    };
  },
  methods: {
    onClick(params, chart) { console.log('click', params); },
    onReady(chart) { /* chart 实例可用于二次操作 */ }
  }
};
</script>